<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许职电竞社</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>

<body>
    <!-- header -->
    <div class="container-fluid">
        <header class="row px-5 d-flex justify-content-between sticky-top">
            <div class="col-sm-4 d-flex align-items-center">
                <img class="logo" src="image/logo.png" alt="">
                <h2 class="ml-5 text-white">电竞社</h2>
            </div>
            <div class="col-sm-4 menu ml-auto">
                <ul class="justify-space-between  d-none d-sm-flex">
                    <li class="col-3 text-center"><a href="#shouye" class="active">首页</a></li>
                    <li class="col-3 text-center"><a href="#game">游戏</a></li>
                    <li class="col-3 text-center"><a href="#club">社团</a></li>
                    <li class="col-3 text-center"><a href="#about">关于</a></li>
                </ul>
            </div>
        </header>
    </div>
    <!-- 首页 -->
    <section id="shouye" class="active overflow-hidden">
        <div class="wrapper row justify-content-center">
            <!-- 轮播图 -->
            <div class="shouye_car col-sm-4">
                <div id="car1" class="carousel slide " data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#car1" data-slide-to="0" class="active"></li>
                        <li data-target="#car1" data-slide-to="1"></li>
                        <li data-target="#car1" data-slide-to="2"></li>
                        <li data-target="#car1" data-slide-to="3"></li>

                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="img-fluid" src="./image/shouye_pic5.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="./image/shouye_pic6.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="./image/shouye_pic3.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="./image/shouye_pic4.jpg" alt="">
                        </div>
                    </div>
                    <a href="#car1" class="carousel-control-prev" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a href="#car1" class="carousel-control-next" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
            <!-- 资讯 -->
            <div class="info col-sm-4">
                <ul class="info_nav d-flex justify-content-center">
                    <li class=""><a href="#" class="news active">新闻</a></li>
                    <li class=""><a href="#" class="match">赛事</a></li>
                </ul>
                <div class="info_content">
                    <ul class="news_content">
                    </ul>
                    <ul class="match_content">
                    </ul>
                </div>
            </div>
        </div>

    </section>
    <!-- 游戏 -->
    <section id="game">
        <div class="wrapper d-flex justify-content-center">
            <ul class="row justify-content-center">
                <li class="col-sm-3">
                    <div class="game_content">
                        <img class="img-fluid" src="./image/shouye_pic4.jpg" alt="">
                        <h3>英雄联盟</h3>
                        <p>英雄联盟（League of Legends）是由美国Riot
                            Games开发，腾讯游戏运营的全新英雄对战网游。英雄联盟的主创团队由各著名游戏公司的核心美术、策划、程序人员组成，他们打造了游戏中风格特色各异的英雄，加入更加丰富的物品合成系统、地图玩法、天梯匹配机制，以及独创的“召唤师”技能、符文、天赋组合，让玩家感受不一样的英雄对战网游。
                        </p>
                        <a target="_blank" href="https://lol.qq.com/main.shtml">官网链接</a>
                        <a target="_blank" href="https://lol.qq.com/download.shtml?ADTAG=lolweb.v3">下载游戏</a>
                    </div>
                </li>
                <li class="col-sm-3">
                    <div class="game_content">
                        <img class="img-fluid" src="./image/game_pic.jpg" alt="">
                        <h3>王者荣耀</h3>
                        <p>《王者荣耀》是腾讯第一5V5团队公平竞技手游，国民MOBA手游大作！5V5王者峡谷、公平对战、还原MOBA经典体验；契约之战、五军对决、边境突围等，带来花式作战乐趣！10秒实时跨区匹配，与好友开黑上分，向最强王者进击！多款英雄任凭选择，一血、五杀、超神，实力碾压，收割全场！敌军即将到达战场，王者召唤师快来集结好友，准备团战，就在《王者荣耀》
                        </p>
                        <a target="_blank" href="https://pvp.qq.com/">官网链接</a>
                        <a  href="#game"  class="wzDownload">下载游戏</a>
                    </div>
                </li>
                <li class="col-sm-3">
                    <div class="game_content">
                        <img class="img-fluid" src="./image/shouye_pic3.jpg" alt="">
                        <h3>绝地求生</h3>
                        <p>绝地求生中，每一局游戏有100名玩家参与，玩家空投跳伞至孤岛的各个角落，赤手空拳寻找武器，车辆以及物资，并在多种多样的地形中展开战斗。随着时间的流逝，安全区会不断变化，充满各种随机性要素，因此想要取得胜利，策略与枪法同样重要。
                        </p>
                        <a target="_blank" href="https://pubg.qq.com/main.shtml">官网链接</a>
                        <a target="_blank" href="https://pubg.qq.com/cp/a20171127apply/index0110.shtml">下载游戏</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="modal">
            <div class="dia-download d-flex">
                <div class="code"><img src="//game.gtimg.cn./images/yxzj/web201706./images/comm/code.png"></div>
                <div class="btnlist">
                    <a href="//dlied6.qq.com/invc/xfspeed/qqpcmgr/download/GameDownload_wzry_Build4096_12.exe"
                        target="_blank" class="pc"></a>
                    <a href="https://pvp.qq.com/zlkdatasys/mct/d/play.shtml?device=ios" target="_blank" class="ios"></a>
                    <a href="https://pvp.qq.com/zlkdatasys/mct/d/play.shtml?device=android" target="_blank"
                        class="android"></a>
                    <a href="https://dlied4.myapp.com/myapp/1104466820/cos.release-40109/2017_com.tencent.tmgp.sgame_a1369357_3.63.1.5_x3SLhM.apk"
                        target="_blank" class="android1"></a>
                </div>
                <a class="dia-close" href="javascript:showDialog.hide()" title="关闭"></a>
            </div>
            
        </div>
    </section>
    <!-- 社团 -->
    <section id="club" class="overflow-hidden">
        <div class="wrapper row justify-content-center">
            <!-- 轮播图 -->
            <div class="club_car col-sm-4">
                <div id="car2" class="carousel slide " data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#car2" data-slide-to="0" class="active"></li>
                        <li data-target="#car2" data-slide-to="1"></li>
                        <li data-target="#car2" data-slide-to="2"></li>
                        <li data-target="#car2" data-slide-to="3"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="img-fluid" src="./image/shouye_pic5.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="./image/shouye_pic6.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="./image/shouye_pic3.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="img-fluid" src="./image/shouye_pic4.jpg" alt="">
                        </div>
                    </div>
                    <a href="#car2" class="carousel-control-prev" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a href="#car2" class="carousel-control-next" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
            <!-- 资讯 -->
            <div class="activity col-sm-3">
                <div class="activity_nav d-flex justify-content-center">
                    <h3>近日活动</h3>
                </div>
                <div class="activity_content">

                </div>
            </div>
        </div>
    </section>
    <!-- 关于 -->
    <section id="about" class="overflow-hidden">
        <div class="wrap d-flex flex-column align-items-center  justify-content-center">
            <h4 class="text-white text-center">欢迎大家加入许职电竞社</h4>
            <div class="join d-flex flex-column align-items-center">
                <p class="text-center text-white">扫描下方二维码加入我们</p>
                <img class="img-fluid" src="./image/join_pic.jpg" alt="">
            </div>
            <div class="footer ">
                <p class="text-white">
                    本网站是社长自制，不足之处，敬请谅解！
                </p>
            </div>
        </div>
        
    </section>
    <!-- 底部菜单栏 -->
    <div id="menu" class="d-sm-none d-block fixed-bottom border-top ">
        <ul class="jusitfy-content-around d-flex d-sm-none">
            <li class="col-3 text-center border-right"><a href="#shouye" class="active ">首页</a></li>
            <li class="col-3 text-center border-right"><a href="#game" class="">游戏</a></li>
            <li class="col-3 text-center border-right"><a href="#club" class="">社团</a></li>
            <li class="col-3 text-center border-right"><a href="#about" class="">关于</a></li>
        </ul>
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>